{template 'header'}
<style type="text/css">
.lecture-page {
    padding-bottom:60px;
}
.lecture-page .g-modal .content {
    padding-top:15px;
}
.lecture-page .header {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    padding:10px;
    text-align:center;
}
.lecture-page .header .credit, .lecture-page .header .plan {
    -webkit-text-decoration:none;
    text-decoration:none;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    background:#fff;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    margin-right:10px;
    padding:20px 22px;
    padding-left:23px;
    text-align:left;
    padding-right:10px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.lecture-page .header .credit .credit-left, .lecture-page .header .plan .credit-left {
    width:50px;
    height:42px;
}
.lecture-page .header .credit .credit-left img, .lecture-page .header .plan .credit-left img {
    height:40px;
    width:40px;
}
.lecture-page .header .credit .credit-right, .lecture-page .header .plan .credit-right {
    width:20px;
    height:100%;
}
.lecture-page .header .credit .credit-right img, .lecture-page .header .plan .credit-right img {
    width:20px;
    margin-top:10px;
}
.lecture-page .header .credit .credit-middle, .lecture-page .header .plan .credit-middle {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    height:42px;
}
.lecture-page .header .credit .credit-middle .num-font, .lecture-page .header .plan .credit-middle .num-font {
    font-size:18px;
    color:#808388;
}
@media(max-width:350px) {
    .lecture-page .header .credit .credit-middle .credit-word, .lecture-page .header .plan .credit-middle .credit-word {
        font-size:12px;
    }
    .lecture-page .header .credit .credit-middle .num-font, .lecture-page .header .plan .credit-middle .num-font {
        font-size:17px;
    }
}
@media (max-width:350px) {
    .lecture-page .header .credit .credit-left, .lecture-page .header .plan .credit-left {
        width:40px;
        height:42px;
    }
    .lecture-page .header .credit .credit-left img, .lecture-page .header .plan .credit-left img {
        height:30px;
        width:30px;
        margin-top:7px;
    }
}
.lecture-page .header .plan {
    margin-right:0;
}
.lecture-page .book {
    padding:22px 15px 16px 15px;
    margin:0 10px 10px 10px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.lecture-page .book .top {
    position:relative;
    text-indent:13px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.lecture-page .book .top::before {
    content:' ';
    position:absolute;
    width:7px;
    height:22px;
    background:-webkit-linear-gradient(#fe5064, #fe956f);
    top:0;
    left:0;
}
.lecture-page .book .flex {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    padding:10px 0 10px 0;
}
.lecture-page .book .flex .flex-left {
    margin-right:10px;
}
.lecture-page .book .flex .flex-right {
    overflow:hidden;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.lecture-page .book .flex .cover {
    min-height:133px;
}
.lecture-page .book .flex img {
    width:86px;
    object-fit:cover;
}
.lecture-page .lecture-plan {
    margin:0 10px 10px 10px;
    padding:10px;
    padding-top:22px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.lecture-page .lecture-plan .title {
    position:relative;
    text-indent:10px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    padding-left:10px;
}
.lecture-page .lecture-plan .title::before {
    content:' ';
    position:absolute;
    width:7px;
    height:22px;
    background:-webkit-linear-gradient(#fe5064, #fe956f);
    top:0;
    left:6px;
}
.lecture-page .lecture-plan .plan-item {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    text-align:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    font-size:16px;
    height:53px;
    border-bottom:1px #f0f0f0 solid;
}
.lecture-page .lecture-plan .plan-item:active {
    background:#ececec;
}
.lecture-page .lecture-plan .plan-item:last-child {
    border-bottom:none;
}
.lecture-page .lecture-plan .plan-item .flex-left {
    width:77px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.lecture-page .lecture-plan .plan-item .flex-center {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    overflow:hidden;
    text-align:left;
    margin-right:10px;
}
.lecture-page .lecture-plan .plan-item .flex-right {
    margin-right:7px;
}
.lecture-page .lecture-plan .plan-item .flex-right img {
    width:18px;
}
.lecture-page .lecture-plan .plan-item p {
    line-height:16px;
}
.lecture-page .lecture-plan .plan-item-lock {
    color:#7f8389;
}
.lectures-page {
    padding-bottom:60px;
}
.lectures-page .total-title {
    font-size:20px;
    text-align:center;
    padding:15px 0 8px 0;
    font-weight:bold;
}
.lectures-page .lecture-wrap {
    margin:10px;
    background:#fff;
    border-radius:6px;
    margin-bottom:13px;
    box-shadow:0 4px 26px -12px #e6e5e5;
}
.lectures-page .lecture-wrap .lock {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-radius:6px;
    background:rgba(255, 255, 255, 0.7);
}
.lectures-page .lecture-wrap .lock img {
    width:30px;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
}
.lectures-page .lecture {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    position:relative;
}
.lectures-page .lecture-left {
    margin-right:15px;
    width:100px;
    height:130px;
}
.lectures-page .lecture-left img {
    width:86px;
    object-fit:cover;
}
.lectures-page .lecture-right {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    overflow:hidden;
}
.lectures-page .lecture-right .title {
    font-size:16px;
    margin-bottom:7px;
}
.lectures-page .lecture-right .author {
    color:#999;
    margin-bottom:15px;
}
.lectures-page .no-reg-time {
    position:fixed;
    top:-22px;
    left:0;
    height:22px;
    line-height:22px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    width:100%;
    background-color:#fe5164;
    color:#fff;
    text-align:center;
    -webkit-transition:top 0.5s;
    transition:top 0.5s;
}
</style>
        <div class="lectures-page">
            <div class="lectures g-img-full">
                 {loop $result['list'] $list}
                 <div class="lecture-wrap g-rlt g-push" {if !$list['dir']['lock']}onclick="location.href='{php echo $this->murl('blisten',array('cid'=>$list['chap'][1]['id']))}'"{/if}>
                     <div style="padding: 18px 10px;">
                         <div class="lecture">
                             <div class="lecture-left">
                                 <img class="anm-fade-in" src="{php echo toimage($book['cover'])}" alt="">
                             </div>
                             <div class="lecture-right">
                                 <div class="title">{$list['dir']['title']}</div>
                                 <div class="author">
                                     <div class="author-left g-text-cut">作者：{$book['author']}</div>
                                 </div>
                                 <div class="desc g-color-grey g-text-cut-3" style="line-height: 23px;">{$book['des']}</div>
                             </div>
                         </div>
                         <p style="padding: 0.14rem 0.1rem 0px; color: rgb(151, 151, 151); text-align: right; font-size: 0.12rem;"><span style="color: rgb(254, 83, 101);">已学{$list['dir']['opennum']}节</span>/共{php echo count($list['chap'])}节</p>
                     </div>
                     <div class="lock {if !$list['dir']['lock']}g-hidden{/if}">
                         <img src="{RES}img/lock2.png" alt="">
                     </div>
                 </div>
                 {/loop}
            </div>
            <div class="g-tip " style="position: fixed; top: -30px; left: 0px; width: 100%; height: 30px; text-align: center; line-height: 30px; background-color: rgb(254, 81, 100); color: rgb(255, 255, 255); letter-spacing: 1px; font-size: 15px; transition: all 0.5s;">我们下周一开始学习，敬请期待</div>
            <div class="g-tip " style="position: fixed; top: -30px; left: 0px; width: 100%; height: 30px; text-align: center; line-height: 30px; background-color: rgb(247, 183, 76); color: rgb(255, 255, 255); letter-spacing: 1px; font-size: 15px; transition: all 0.5s;">课程已全部更新，可永久回听</div>
            <div class="g-card">
                <div class="" style="display: none;">
                    <div class="g-card-mask"></div>
                    <div class="g-fixed-center g-card-main g-text-center">
                        <p class="g-card-word">长按保存图片，可分享给好友</p>
                        <div>
                            <img class="g-card-img">
                        </div>
                        <img src="https://staticqc.xiaoxiafm.com/image/close.280c958f33c14a9ddd75cb78995053c5.png" class="g-card-close">
                    </div>
                </div>
            </div>
            <div class="g-modal  g-hidden">
                <div class="g-mask"></div>
                <div class="dialog">
                    <div class="content">
                        <div class="modal-body">
                            <div>别急，我们下周一（0天后），统一开始学习， 到时公众号会提醒你</div>
                        </div>
                    </div>
                    <div class="g-modal-footer"><a class="g-modal-btn active" href="javascript:;">我知道了</a>
                    </div>
                </div>
            </div>
            <div class="g-modal  g-hidden">
                <div class="g-mask"></div>
                <div class="dialog">
                    <div class="content">
                        <div style="padding: 20px 0px;">别心急，每周开放一章节</div>
                    </div>
                    <div class="g-modal-footer"><a class="g-modal-btn active" href="javascript:;">我知道了</a>
                    </div>
                </div>
            </div>
        </div>
        {template 'loading'}
       {template 'footer'}